import React, { useState } from 'react'
import { NavBar, Input, Button ,Popup,Calendar,Switch} from 'antd-mobile'
import { LoopOutline, PictureOutline } from 'antd-mobile-icons'
import dayjs from 'dayjs'
import { useNavigate } from 'react-router-dom'
function Index() {
  let nav=useNavigate()
  // 是否高铁
  let [isSpeed,setisSpeed]=useState(false)
  // 出发地
  const [value, setValue] = useState('北京')
  // 目的地
  const [value1, setValue1] = useState('广州')
  let [date, setdate] = useState(dayjs().format('M月D日'))
  // 选择时间
  const [visible1, setVisible1] = useState(false)
  const defaultSingle = new Date()
  let totime = () => {
    // 弹出层
    setVisible1(true)
  }
  // 跳转列表
  let handlist=()=>{
    nav(`/list?start=${value}&end=${value1}&date=${date}&isSpeed=${isSpeed}`)
  }
  return (
    <div>
      {/* 弹出层 */}
      <Popup
        visible={visible1}
        onMaskClick={() => {
          setVisible1(false)
        }}
        onClose={() => {
          setVisible1(false)
        }}
      >
        {/* 日期选择 */}
        <Calendar
          selectionMode='single'
          defaultValue={defaultSingle}
          onChange={val => {
            console.log(val)
            setdate(dayjs(val).format('M月D日'))
             setVisible1(false)
          }}
        />
      </Popup>

      <div style={{ background: 'rgba(244, 242, 242, 1)', height: '100vh' }}>
        <NavBar style={{ background: '#302f2fff', color: '#fff' }}></NavBar>
        <div style={{ background: '#302f2fff', height: '120px', position: 'relative' }}>
          <div style={{ padding: '15px 18px', color: '#fff' }}>
            <h3>火车票预订</h3>
            <p style={{ margin: '12px 0' }}>便捷购票，服务您的每一次出行</p>
          </div>
          {/* 定位 */}
          <div style={{ position: 'absolute', top: '90px', left: '20px', borderRadius: '10px', zIndex: '999' }}>
            <div style={{ background: '#fff', borderRadius: '10px', width: '90vw', height: '200px', position: 'relative' }}>
              {/* 输入框 */}
              <div style={{
                background: 'rgba(244, 242, 242, 1)', padding: '0 10px', display: 'flex', justifyContent: 'space-around',
                position: 'absolute', top: '18px', margin: '0 18px', height: '40px', borderRadius: '8px', alignItems: 'center'
              }}>
                <Input
                  placeholder='请输入内容'
                  value={value}
                  onChange={val => {
                    setValue(val)
                  }}
                />
                <span style={{ fontSize: '18px' }}><LoopOutline /></span>
                <Input
                  style={{ '--text-align': 'right' }}
                  placeholder='请输入内容'
                  value={value1}
                  onChange={val => {
                    setValue(val)
                  }}
                />
              </div>
              {/* 时间 */}
              <div style={{
                background: 'rgba(244, 242, 242, 1)', position: 'absolute', top: '70px', padding: ' 0 10px',
                margin: '0 18px', height: '40px', borderRadius: '8px', alignItems: 'center', display: 'flex', width: '81vw'
              }}>
                <span onClick={() => totime()}>{date}</span> <span style={{ margin: '0 10px', fontSize: '10px', color: '#ccc' }}>明天</span>
              </div>
              {/* 按钮 */}
              <div style={{
                position: 'absolute', width: '81vw'
                , top: '120px',
              }}>
                <Button block style={{
                  '--background-color': '#302f2fff', color: '#fff', padding: ' 0 10px', margin: '0 18px', height: '40px', borderRadius: '8px'
                }} onClick={()=>handlist()}>查询</Button>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '10px', margin: '10px 18px' }}>
                  <p style={{ border: '1px solid #615e5eff', borderRadius: '8px', padding: '0 3px' }}>
                    合肥-南京</p><Switch defaultChecked={false} onChange={()=>setisSpeed(!isSpeed)}></Switch> <p>清空</p>
                </div>
              </div>
            </div>
            <div style={{
              background: '#fff', borderRadius: '10px', width: '90vw', height: '80px',
              marginTop: '15px', display: 'flex', justifyContent: 'space-around', alignItems: 'center'
            }}>
              <div>
                <p style={{ background: 'rgba(244, 242, 242, 1)', width: '40px', height: '40px', borderRadius: '50%', display: 'flex', justifyContent: 'center', alignItems: 'center', fontSize: '17px' }}><PictureOutline /></p>
                <p>12306账号</p>
              </div>
              <div>
                <p style={{ background: 'rgba(244, 242, 242, 1)', width: '40px', height: '40px', borderRadius: '50%', display: 'flex', justifyContent: 'center', alignItems: 'center', fontSize: '17px' }}><PictureOutline /></p>
                <p>我的订单</p>
              </div>
              <div>
                <p style={{ background: 'rgba(244, 242, 242, 1)', width: '40px', height: '40px', borderRadius: '50%', display: 'flex', justifyContent: 'center', alignItems: 'center', fontSize: '17px' }}><PictureOutline /></p>
                <p>帮助中心</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Index
